<script setup lang="ts">
  import axios from '@/utils/axios';
  import { ref, reactive, onMounted } from 'vue';

  const data = reactive({
    postsList: [{
      postId: 0,
      title: "",
      content: "",
      likeCount: 0,
      commentCount: 0,
      collectCount: 0,
      publishTime: "",
      user: {},
      games: {
        gameName: '',
      },
      postImages: [{
        imageUrl: '',
      }],
      postTags: [],
      comments: [],
    }]
  });

  // 初始化首页面
  const init = () => {
    const url = "/api/hotStop/getSort";
    axios.post(url)
        .then(res => {
          data.postsList = res.data;
        })
        .catch(err => {
          console.error("获取热榜数据失败:", err);
        });
  };

  onMounted(init);

  // 时间格式化函数
  const formatTime = (timestamp: string): string => {
    const now = new Date();
    const postTime = new Date(timestamp);
    const diffInHours = (now.getTime() - postTime.getTime()) / (1000 * 60 * 60);

    if (diffInHours < 1) {
      const minutes = Math.floor(diffInHours * 60);
      return `${minutes}分钟前`;
    }
    if (diffInHours < 24) {
      const hours = Math.floor(diffInHours);
      return `${hours}小时前`;
    }
    if (diffInHours < 48) {
      const hour = postTime.getHours().toString().padStart(2, '0');
      const minute = postTime.getMinutes().toString().padStart(2, '0');
      return `昨天 ${hour}:${minute}`;
    }

    if (postTime.getFullYear() === now.getFullYear()) {
      const month = postTime.getMonth() + 1;
      const day = postTime.getDate();
      return `${month}-${day}`;
    }

    const year = postTime.getFullYear();
    const month = postTime.getMonth() + 1;
    const day = postTime.getDate();
    return `${year}-${month}-${day}`;
  };
</script>

<template>
  <div class="content-list">

    <!-- 列表内容 -->
    <div
        v-for="(item, index) in data.postsList"
        :key="item.postId"
        class="content-item"
        :class="{ 'top-3': index < 3 }"
    >
      <router-link
          :to="{ name: 'PostDetails', params: { postId: item.postId } }"
          class="content-link"
      >
        <!-- 排名徽章 -->
        <div class="rank-badge" :class="{'first': index === 0, 'second': index === 1, 'third': index === 2}">
          {{ index + 1 }}
        </div>

        <!-- 文本区域 -->
        <div class="text-area">
          <h3 class="title">{{ item.title }}</h3>
          <div class="info-container">
            <p class="info">
              {{ formatTime(item.publishTime) }} ·
              <span class="category">{{ item.games.gameName }}</span>
            </p>
            <div class="stats">
              <span class="stat-item"><van-icon name="thumbs-up-o" size="14" /> {{ item.likeCount }}</span>
              <span class="stat-item"><van-icon name="chat-o" size="14" /> {{ item.commentCount }}</span>
            </div>
          </div>
        </div>

        <!-- 缩略图 -->
        <img
            v-if="item.postImages && item.postImages[0].imageUrl"
            :src="item.postImages[0].imageUrl"
            alt="内容图片"
            class="item-image"
            loading="lazy"
        />
      </router-link>
    </div>
  </div>
</template>

<style scoped>
  .content-list {
    flex: 1;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding-bottom: 20px;
  }

  .topics-header {
    padding: 16px 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }

  .topics-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
  }

  .update-time {
    font-size: 12px;
    color: #999;
  }

  .content-item {
    margin: 8px 15px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .content-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .content-item.top-3 {
    border: 1px solid #f0f0f0;
  }

  .content-link {
    display: flex;
    align-items: center;
    padding: 12px;
    text-decoration: none;
  }

  .rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
    color: white;
    background-color: #999;
  }

  .rank-badge.first {
    background-color: #FF4D4F; /* 红色 */
  }

  .rank-badge.second {
    background-color: #FAAD14; /* 金色 */
  }

  .rank-badge.third {
    background-color: #1890FF; /* 蓝色 */
  }

  .text-area {
    flex: 1;
    margin-right: 12px;
    min-width: 0;
  }

  .title {
    font-size: 16px;
    margin: 0 0 8px 0;
    line-height: 1.5;
    color: #1a1a1a;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
  }

  .info {
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .category {
    color: #666;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
  }

  .stats {
    display: flex;
    gap: 12px;
    color: #888;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .item-image {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }
</style>